<template>
  <main-layout>
      <header>
         <van-nav-bar title="消息" :border="false"/>
      </header>
      <article>
        <div class="info-list" v-for="it in messageList" :key='it.title' @click="dialogEvt(it)">
          <div class="pic">
              <img :src="it.img" alt="">
          </div>
          <div class="content">
              <div class="title">{{it.title}}</div>
              <div class="detail">{{it.content}}</div>
          </div>
          <div class="time">{{it.time}}</div>
     </div>

      </article>
    </main-layout>
</template>

<script>
import mockMessage from '../../apis/messageApis'
export default {
    
    data(){
        return {
            show:true,
            messageList:[]
        }
    },

    created(){
        this.getList()
    },

    methods:{
        async getList(){
           let res = await mockMessage.getMessageApi()
           this.messageList = res.data.rows
        },

        async dialogEvt(item){
            // this.$route(id)
            this.$router.push({
                name:'dialog',
                params:{id:item.id}
            })

        }
    }
}
</script>

<style scoped lang="less">
@import '../../style/';
   header{
       height: 46px;
   }
   article{
    display: block;
    overflow-x: hidden;
    height: calc(100% - 46px);
    background-color: #fff;
      .info-list{
          display: block;
          height: 70px;
          padding: 4px 10px;
          .clear();
        .pic{
            float: left;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-top:8px;
            margin-right: 10px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .content{
            float: left;
            margin-top: 8px;
            .title{
                font-weight: 700;
                line-height: 30px;
                font-size: .9rem;
            }
            .detail{
                font-size: .6rem;
                color: #777;
            }
        }
        .time{
            float: right;
            font-size: .55rem;
            color: #999;
        }
      }
   }
</style>

